<template>
	<view>
		<view  style="width: 22rem;margin: 0 auto;">
			<u-search placeholder="请输入关键字" :showAction="false" v-model="movieName" borderColor="white" bgColor="#06041F" color="white"></u-search>
		</view>
		
		<view class="movie-list">
			<view class="movie-wapper" v-for="item in welList" :key="item.id" :value="item.id">
				<image :src="item.img" class="poster" @click="showTrailer"></image>
			</view>
		</view>
		<Tabbar :current="'1'"></Tabbar>
	</view>
</template>

<script>
import Tabbar from '../../components/tabbar/tabbar.vue'
	export default {
		data() {
			return {
				movieName:'',
				welList:[
					{
						id:'1',
						img:'/static/poster/civilwar.jpg'
					},
					{
						id:'2',
						img:'/static/poster/justice.png'
					},
					{
						id:'3',
						img:'/static/poster/aladdin.png'
					},
					
				],
			}
		},
		components: {
			Tabbar
		}, 
		onReachBottom() {
			
		},
		onLoad() {
			// uni.showLoading({
			// 	mask:true,
			// 	title:"加载中..."
			// })
			// uni.showNavigationBarLoading()
			
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {
			searchMe(){
				
			},
			showTrailer(){
				uni.navigateTo({
					url:".../moviedetails/moviedetails"
				})
			}
		}
	}
</script>

<style>
page{
	background: linear-gradient(to bottom,#06041F,#06041F);
	color: white;
}
.movie-list{
	padding-left: 10px;
	display: flex;
	justify-content: flex-start;
	flex-direction: row;  
	flex-wrap: wrap;
}
.movie-wapper{
	  
	padding: 10upx 20upx;
}
.poster{
	width: 200upx;
	height: 270upx;
}
</style>
